<template>
  <div class="container">
    <div class="share-box">
      <img v-if="fileSpace" :src="fileSpace + '/images/share-bg.png'" alt="" class="width-375 height-146">      
      <div class="share-top-one text-align-c">
        <p class="share-num top-one font-31" :class="!iosType ? 'share-num-android' : ''">{{ countShare.shareNum }}</p>
        <div class="center-item">
          <p class="flex v-align-c font-13" @click="tips('1')">
            <span>{{getAppInfo.memberShareAlias || '分销商'}}（个）</span>
            <img v-if="fileSpace" :src="fileSpace + '/images/icon-qus.png'" alt="" class="width-12 height-12 mar-l-1">
          </p>
        </div>
      </div>
      <div class="share-top-two text-align-c">
        <div class="share-two-bg flex v-align-c">
          <div class="flex-item">
            <p class="share-num font-24" :class="!iosType ? 'share-num-android' : ''">{{ countShare.totalPrice }}</p>
            <div class="center-item">
              <p class="flex v-align-c font-12" @click="tips('2')">
                <span>合计销售额(元)</span>
                <img v-if="fileSpace" :src="fileSpace + '/images/icon-qus.png'" alt="" class="width-12 height-12 mar-l-5 mar-t-2">
              </p>
            </div>
          </div>
          <div class="share-two-line"></div>
          <div class="flex-item">
            <p class="share-num font-24" :class="!iosType ? 'share-num-android' : ''">{{ countShare.totalOrderNum }}</p>
            <div class="center-item">
              <p class="flex v-align-c font-12" @click="tips('3')">
                <span>合计订单(笔)</span>
                <img v-if="fileSpace" :src="fileSpace + '/images/icon-qus.png'" alt="" class="width-12 height-12 mar-l-5 mar-t-2">
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search-bar">
      <van-search
        :value="listQuery.nickname"
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox">
        <!-- <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div> -->
      </van-search>
    </div>
    <div class="options-bar flex flex-center pad-t-6 pad-b-6 font-w" @click="showTypePicker">
      <span>{{ searchType.text }}</span>
      <img v-if="fileSpace" :src="fileSpace + '/images/icon-arrow-s.png'" alt="" class="width-8 height-6 mar-l-5">
    </div>
    <ul class="list">
      <li class="flex v-align-c" @click="detailOpen(item)"
        v-for="(item, index) in listData" :key="index">
        <div class="flex-item mar-l--15">
          <div class="flex v-align-c">
            <img :src="item.avatar" alt="" class="width-45 height-45 avatar-img mar-r-13">
            <span>
              <p class="font-14 font-w mar-b--5">{{ item.nickname }}</p>
              <p class="font-12 flex v-align-c">
                <u class="font-color-6">销售额(元)：</u>
                <u v-if="searchType.value === '2'" class="font-15 font-w">{{ item.userPrice }}</u>
                <u v-if="searchType.value === '3'" class="font-15 font-w">{{ item.projectPrice }}</u>
                <u v-if="searchType.value === '0' || searchType.value === '1'" class="font-15 font-w">{{ item.totalPrice }}</u>
              </p>
            </span>
          </div>
        </div>
        <div class="text-align-r">
          <p class="font-12 font-color-9 font-w mar-b--2">{{ item.createTime }}</p>
          <p class="font-12 flex v-align-c">
            <u class="font-color-6">订单(笔)：</u>
            <u v-if="searchType.value === '2'" class="font-15 font-w">{{ item.userOrderNum }}</u>
            <u v-if="searchType.value === '3'" class="font-15 font-w">{{ item.projectOrderNum }}</u>
            <u v-if="searchType.value === '0' || searchType.value === '1'" class="font-15 font-w">{{ item.totalOrderNum }}</u>
          </p>
        </div>
        <icon class="iconfont icon-arrow-right mar-l-10"></icon>
      </li>
    </ul>
    <div class="nodata text-align-c" v-if="dataNone">
      <div class="align-c mar-t-20 font-16 font-color-6">
        暂无数据~
      </div>
    </div>
    <div v-if="detailBoolean" class="detail-layer" catchtouchmove="true">
      <div class="detail-layer-box">
        <div class="flex v-align-c mar-t--20 mar-l--17 mar-b-9">
          <img :src="detail.avatar" alt="" class="width-60 height-60 avatar-img mar-r-10">
          <span>
            <p class="font-13 font-w mar-t-23 mar-b--2">{{ detail.nickname }}</p>
            <p class="font-12 font-color-6">{{ detail.createTime }}</p>
          </span>
        </div>
        <div class="detail-1 font-15 font-w">
          <p>合计订单(笔)：{{ detail.totalOrderNum }}</p>
          <p>合计销售额(元)：{{ detail.totalPrice }}</p>
        </div>
        <div class="detail-2 font-15">
          <p class="flex v-align-c">
            <span class="font-color-6">自营销售额(元)：</span>
            <span>{{ detail.userPrice }}</span>
          </p>
          <p class="flex v-align-c">
            <span class="font-color-6">分销销售额(元)：</span>
            <span>{{ detail.projectPrice }}</span>
          </p>
        </div>
        <div class="detail-2 font-15">
          <p class="flex v-align-c">
            <span class="font-color-6">自营订单(笔)：</span>
            <span>{{ detail.userOrderNum }}</span>
          </p>
          <p class="flex v-align-c">
            <span class="font-color-6">{{getAppInfo.projectOrderAlias || '分销订单'}}(笔)：</span>
            <span>{{ detail.projectOrderNum }}</span>
          </p>
        </div>
        <img v-if="fileSpace" :src="fileSpace + '/images/icon-close-5.png'" alt=""
          class="width-35 height-35 detail-layer-close" @click="detailBoolean = false">
      </div>
      <div class="detail-layer-bg" @click="detailBoolean = false"></div>
    </div>
    <van-popup
      :show="isShowType"
      position="bottom"
      @close="onTypeClose">
      <van-picker
        show-toolbar
        :columns="pickerTypeArray"
        @cancel="onTypeClose"
        @confirm="onTypeConfirm"/>
    </van-popup>
    <div class="add-share circle-button box-shadow fixed-btn" :style="{background: 'linear-gradient(128deg,'+(globalStyle.color1 ? globalStyle.color1 : globalStyle.color2)+','+globalStyle.color2+')'}" v-if="shareBtnBoolean">
      <button class="button-icon" @click="addShare">
        <img v-if="fileSpace" :src="fileSpace + '/images/icon-add-5.png'" alt="" class="width-30 height-30">
      </button>
    </div>
    <div class="share-layer" v-if="shareLayerBoolean">
      <ul>
        <li class="flex v-align-c align-r">
          <p class="font-color-6 font-15">添加{{getAppInfo.memberShareAlias || '分销商'}}</p>
          <div class="add-c circle-button box-shadow">
            <button class="button-icon" @click="goPage('custom-add')">
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-add-6.png'" alt="" class="width-30 height-30">
            </button>
          </div>
        </li>
        <li class="flex v-align-c align-r">
          <p class="font-color-6 font-15">取消</p>
          <div class="cancel-c circle-button box-shadow">
            <button class="button-icon" @click="cancelShare">
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-remove-6.png'" alt="" class="width-30 height-30">
            </button>
          </div>
        </li>
      </ul>
      <div class="share-layer-bg" @click="cancelShare"></div>
    </div>
  </div>
</template>

<script>
  import { countMemberShare, selectPageShare } from '@/api/personal'

  export default {
    data() {
      return {
        countShare: {},
        currentPage: 1,
        listQuery: {
          currentPage: 1,
          size: 10,
          memberId: '',
          searchType: '',
          nickname: ''
        },
        pullLoad: {
          loading: false,
          finished: false
        },
        dataNone: false,
        listData: [],
        detail: {},
        isShowType: false,
        pickerTypeArray: [],
        searchType: {
          text: '',
          value: '0'
        },
        shareBtnBoolean: true,
        shareLayerBoolean: false,
        detailBoolean: false,
        iosType: false,
        globalStyle: {},
        getAppInfo: {}
      }
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.listEls()
      }
    },
    onLoad() {
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') !== -1) {
        this.iosType = true
      }
    },
    onShow() {
      this.getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = this.getAppInfo.style
      this.$pt.setNavigationBarTitle({
        title: this.getAppInfo.customerShareAlias || '顾客分销'
      })
      this.searchType.text = `成为${this.getAppInfo.memberShareAlias || '分销商'}时间`
      this.countMemberShare()
      this.listData = []
      this.currentPage = 1
      this.pullLoad.finished = false
      this.listEls()
    },
    methods: {
      goPage(type) {
        this.shareBtnBoolean = true
        this.shareLayerBoolean = false
        this.$pt.navigateTo({url: '/pages/home/customer-share/' + type + '/main'})
      },
      detailOpen(item) {
        // this.detailBoolean = true
        this.detail = item
        this.$pt.navigateTo({ url: `/pages/home/customer-manage/detail/main?id=${item.shareMemberId}&name=${item.nickname}` })
      },
      addShare() {
        this.shareBtnBoolean = false
        this.shareLayerBoolean = true
      },
      cancelShare() {
        this.shareBtnBoolean = true
        this.shareLayerBoolean = false
      },
      showTypePicker() {
        this.isShowType = true
      },
      onTypeClose() {
        this.isShowType = false
      },
      onTypeConfirm(e) {
        this.isShowType = false
        this.searchType = e.mp.detail.value
        this.listData = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listEls()
      },
      onSearch(e) {
        // 键盘直接搜索点击事件
        this.listQuery.nickname = e.mp.detail
        this.listData = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listEls()
      },
      onChangeVal(e) {
        this.listQuery.nickname = e.mp.detail
      },
      onSearch2() {
        // 搜索按钮点击事件
      },
      tips(type) {
        if (type === '1') {
          this.$utils.showToast({
            title: `合计${this.getAppInfo.memberShareAlias || '分销商'}数`,
            duration: 5000
          })
        } else if (type === '2') {
          this.$utils.showToast({
            title: `${this.getAppInfo.memberShareAlias || '分销商'}产生的自营商品销售额+分销商品销售额`,
            duration: 5000
          })
        } else if (type === '3') {
          this.$utils.showToast({
            title: `${this.getAppInfo.memberShareAlias || '分销商'}产生的自营商品订单数+分销商品订单数`,
            duration: 5000
          })
        }
      },
      countMemberShare() {
        countMemberShare(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.countShare = response.data
        }).catch(() => {
        })
      },
      listEls() {
        this.pickerTypeArray = [
          { text: `成为${this.getAppInfo.memberShareAlias || '分销商'}时间`, value: '0' },
          { text: '合计佣金', value: '1' },
          { text: '自营商品佣金', value: '2' },
          { text: '分销商品佣金', value: '3' }
        ]
        this.listQuery.currentPage = this.currentPage
        this.listQuery.memberId = this.getCustomerId
        this.listQuery.searchType = this.searchType.value
        selectPageShare(this.listQuery).then((response) => {
          if (response.isError) return
          this.dataNone = false
          if (response.isError) return
          response.data.records.forEach(item => {
            if (item.createTime) {
              item.createTime = item.createTime.substring(0, 10)
            }
            this.listData.push(item)
          })
          this.currentPage++
          if (this.listQuery.currentPage === response.data.pages) {
            this.pullLoad.finished = true
          }
          if (response.data.records.length === 0) {
            this.dataNone = true
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  background: #fff;
  min-height: calc(100vh);
  .nodata {
    margin-top: 115px;
    img{
      display: inline-block;
    }
  }
  .share-box{
    position: relative;
    z-index: 1;
    .share-num{
      line-height: 1;
      padding: 12px 0 6px 0;
      &.share-num-android{
        line-height: 1.4!important;
        &.top-one{
          line-height: 1.1!important;
          margin-top: -5px;
        }
      }
    }
    .share-top-one{
      position: absolute;
      z-index: 5;
      top: 0;
      left: 0;
      width: 100%;
      .font-31{
        font-size: 31px;
      }
    }
    .share-top-two{
      position: absolute;
      z-index: 5;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      .share-two-bg{
        background: #ffe154;
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .share-two-line{
        width: 1px;
        height: 32px;
        background: #f9d241;
      }
    }
    .center-item{
      display: inline-block;
      vertical-align: middle;
      margin-top: -20px;
      height: 20px;
      label{
         display: block;
      }
    }
  }
  .search-bar{
    background: #ffd738;
    padding: 14px 15px;
    /deep/ .van-search{
      border-radius: 100px;
      padding: 0 0px;
      overflow: hidden;
      .van-icon-search{
        margin-top: 5px;
        color: #999;
      }
      .van-field__input{
        height: 28px;
        line-height: 28px;
        min-height: 28px;
      }
      .van-search__action{
        display: none;
      }
    }
  }
  .options-bar{
    background: #fffbed;
  }
  ul.list{
    margin: 0 0 0 15px;
    li{
      border-bottom: #f1f1f1 1px solid;
      padding: 15px 13px 15px 0;
      margin-left: 15px;
      &:last-child{
        border-bottom: none;
      }
      .avatar-img{
        border-radius: 100px;
      }
      .icon-arrow-right{
        color: #c9c9c9;
      }
    }
  }
  .fixed-btn{
    z-index: 10;
    position: fixed;
    bottom: 65px;
    right: 10px;
  }
  .circle-button {
    border-radius: 100px;
    width: 60px;
    height: 60px;
    text-align: center;
    &.add-share{
      background: linear-gradient(128deg, #fff000, #ffc600);      
    }
    &.remove-c{
      background: linear-gradient(128deg, #75bcff, #4a88ef);      
    }
    &.add-c{
      background: linear-gradient(128deg, #ff8875, #ff543d);
    }
    &.cancel-c{
      background: linear-gradient(128deg, #dcdcdc, #dcdcdc);
    }
    .button-icon{
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .share-layer{    
    ul{
      position: fixed;
      right: 0;
      bottom: 30px;
      z-index: 7;
      li{
        padding: 9px 25px 9px 0;
        .box-shadow{
          margin-left: 10px;
        }
      }
    }
    .share-layer-bg{
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 6;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
    }
  }
  .detail-layer{
    .detail-layer-box{
      width: 292px;
      height: 268px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin: -134px 0 0 -146px;
      background: #fff;
      border-radius: 10px;
      z-index: 16;
      .avatar-img{
        border-radius: 100px;
        border: #fff 3px solid;
      }
      .detail-1{
        background: #ffe254;
        color: #3f2813;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        padding: 11px 0 11px 38px;
        width: 235px;
        box-sizing: border-box;
      }
      .detail-2{
        padding: 11px 0 11px 38px;
      }
      .detail-layer-close{
        position: absolute;
        left: 50%;
        bottom: -50px;
        margin: 0 0 0 -18px;
      }
    }
    .detail-layer-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 15;
    }
  }
}
</style>
